6.2 Tabs

Motivations

Ideas

How to list tabs?
All the tab content is positioned at the same position. They are initially not displayed.
When a tab is selected, i.e., checked or clicked, its content should be displayed.
When a tab is not selected, its content should not be displayed.
A question is how to keep the status of selection. E.g., different background-color of the selected tab.
Another question is how to display the tab content.
Here are elements and pseudo classes that we can use.
- The <a> element with the :target pseudo selector. Read all in CSS3 :target Selector. In the example, can you make the links have a different background color when they are clicked?
- The radio type <input> element with the :checked pseudo selector. Read all in CSS3 :checked Selector.
  - HTML elements that use :checked are radio type <input>, checkbox type <input>, <option> within <select>.
- Which one looks easier to use?
Basic idea of CSS for tabs:
- When a tab is clicked, an element should be selected.
- From that selected element, the tab and its content can be manipulated.
- For that, the selected element, the tab, and its content should be sibligns, or they should be ancestors and descendents.
Tab1

What is the :target selector? Read all in CSS3 :target Selector.
- What element triggers the :target select?
- What element is used with the :target selector?
How can you use the :target selector for tabs?

How to make the tabs?

Each tab is an <a> element within a <div> element.

<style>
    div.xtabs { position: relative; }
    div.xtabs > div { display: inline; }
    div.xtabs > div > a {  /* They will be displayed in the same line. */
        background: LightGrey;
        padding: 5px 10px;
        text-decoration: none;
    }
    div.xtabs > div > div {
        display: none;  /* Initially none. When this content is targeted from its tab, it changes to block. */
        position: absolute;  /* Every content will be displayed at the same position */
        top: 20px;
        left: 0px;
    }
</style>
<div class='xtabs'>  <!-- container of tabs -->
    <div>
        <a>Motivations</a>  <!-- the first tab; tabs should be displayed in a line. -->
        <div>  <!-- content; initially not displayed -->
            Motivations ...
        </div>
    </div>
    <div>
        <a>Tabs using ...</a>  <!-- the second tab -->
        <div>
            Tabs using the :target selector ...
        </div>
    </div>
</div>

Try the above code with runcode. Ask the instructor the username and the password to access the application.

How to change the color when the mouse move over a tab?

The :hover selector.

<style>
    div.xtabs { position: relative; }
    div.xtabs > div { display: inline; }
    div.xtabs > div > a {
        background: LightGrey;
        padding: 5px 10px;
        text-decoration: none;
    }
    div.xtabs > div > div { 
        display: none; 
        position: absolute;
        top: 20px;
        left: 0px;
    }
    div.xtabs > div > a:hover { background: LightBlue; }
</style>
<div class='xtabs'>
    <div>
        <a>Motivations</a>
        <div>
            Motivations ...
        </div>
    </div>
    <div>
        <a>Tabs using ...</a>
        <div>
            Tabs using the :target selector ...
        </div>
    </div>
</div>

Try the above code with runcode. Ask the instructor the username and the password to access the application.

How to change the color when a tab is clicked? Can you use the :hover selector?

You can use JavaScript for this, but let's use the CSS :target selector. The target of the selected tab, i.e., an <a> element, is the its parent <div> element, so that we can do something with the tab.

<style>
    div.xtabs { position: relative; }
    div.xtabs > div { display: inline; }
    div.xtabs > div > a {
        background: LightGrey;
        padding: 5px 10px;
        text-decoration: none;
    }
    div.xtabs > div > div { 
        display: none; 
        position: absolute;
        top: 20px;
        left: 0px;
    }
    div.xtabs > div > a:hover { background: LightBlue; }
    div.xtabs > div:target > a { background: Aquamarine; }
</style>
<div class='xtabs'>
    <div id='xitem1'>
        <a href='#xitem1'>Motivations</a>
        <div>
            Motivations ...
        </div>
    </div>
    <div id='xitem2'>
        <a href='#xitem2'>Tabs using ...</a>
        <div>
            Tabs using the :target selector ...
        </div>
    </div>
</div>

How to display the content when a tab is clicked?

Now you can use the :target selector for the content, i.e., div.xtabs > div > div.

<style>
    div.xtabs { position: relative; }
    div.xtabs > div { display: inline; }
    div.xtabs > div > a {
        background: LightGrey;
        padding: 5px 10px;
        text-decoration: none;
    }
    div.xtabs > div > div { 
        display: none; 
        position: absolute;
        top: 20px;
        left: 0px;
    }
    div.xtabs > div > a:hover { background: LightBlue; }
    div.xtabs > div:target > a { background: Aquamarine; }
    div.xtabs > div:target > div { display:block; }
</style>
<div class='xtabs'>
    <div id='xitem1'>
        <a href='#xitem1'>Motivations</a>
        <div>
            Motivations ...
        </div>
    </div>
    <div id='xitem2'>
        <a href='#xitem2'>Tabs using ...</a>
        <div>
            Tabs using the :target selector ...
        </div>
    </div>
</div>

Can you make tabs for your CV? Let's try here with Contact, Education, Work Experience, and Skills.

Trial 1: The target of an <a> is a <div>. The <div> is initially not displayed.
Let's change the background color of a <a> element when the mouse moves over the element.
<style> div.tr1-tabs > div { ???: ???; } div.tr1-tabs > a { border: 1px solid Black; } div.tr1-tabs > a:??? { background-color: Grey; } </style> <div class='tr1-tabs'> <a>Tab1</a> <div> Tab1 content here... </div> </div>

Trial 2: Let's display the <div> when the <a> element is clicked. You need to use :target.
<style> div.tr2-tabs > div { display: none; } div.tr2-tabs > a { border: 1px solid Black; } div.tr2-tabs > a:hover { background-color: Grey; } div.tr2-tabs > div:??? { display: ???; } </style> <div class='tr2-tabs'> <a href='#tr2-content1'>Tab1</a> <div id='tr2-content1'> Tab1 content here... </div> <a href='???'>Tab2</a> <div id='tr2-content2'> Tab2 content here... </div> </div> Try the above exmaple using this link Ask the instructor the username and the password to access the application.
The question in the above example is how to keep the background color of the <a>. Any good idea?

The idea is to encapsulate the <a> and the <div> within another <div> that is used as the target of the <a>.
Trial 3: The target of a <a> is now the container <div>.
<style> div.tr3-tabs > ??? > div { display: none; } div.tr3-tabs > ??? > a { border: 1px solid Black; } div.tr3-tabs > ??? > a:hover { background-color: Grey; } div.tr3-tabs > div:??? > div { display: block; } div.tr3-tabs > div:??? > a { background-color: Grey; } </style> <div class='tr3-tabs'> <div id='tr3-tab1'> <a href='#tr3-tab1'>Tab1</a> <div> Tab1 content here... </div> </div> <div id='tr3-tab2'> <a href='#tr3-tab2'>Tab2</a> <div> Tab2 content here... </div> </div> </div> Try the above exmaple using this link Ask the instructor the username and the password to access the application.

How to display the <a>s in a line? How to display the content <div> under the <a>?
Trial 4: Let's make the contain <div> be of inline type. And display the <div> of tab content below the <a> of tab, using position.
<style> div.tr4-tabs > div { display: ???; position: ???; } div.tr4-tabs > div > div { display: none; position: ???; top: 20px; width: ???; } div.tr4-tabs > div > a { border: 1px solid Black; } div.tr4-tabs > div > a:hover { background-color: Grey; } div.tr4-tabs > div:target > div { display: block; } div.tr4-tabs > div:target > a { background-color: Grey; } </style> <div class='tr4-tabs'> <div id='tr4-tab1'> <a href='#tr4-tab1'>Tab1</a> <div> Tab1 content here... </div> </div> <div id='tr4-tab2'> <a href='#tr4-tab2'>Tab2</a> <div> Tab2 content here... </div> </div> </div> Try the above exmaple using this link Ask the instructor the username and the password to access the application.

Tabs using the :checked selector

Here is another example that uses radio-type inputs for tabs with the :checked pseudo class. You may note that the :checked selector can be used with the radio-type input element and the checkbox-type input element.
Read all in HTML Forms and all in HTML Input Types , and all in HTML <label> Tag.
Read all in Functional CSS Tabs Revisited.

Here is an idea. Can you complete this example? Let's try now at least to know how to use the input and label elements.

<style>
    div.tabs { position:relative; }  /* in order to provide all the descendent elements with easier positioning */
    div.tabs > div.tab { display:???; }  /* in order to list tabs in a line */
    div.tabs > div.tab > input { display:???; }  /* always not displayed */
    div.tabs > div.tab > div.content { display:???; }  /* initially not displayed */
    ...
</style>

<div class='tabs'>
   <div class='tab'>
       <input type='radio' id='tab1' name='tab-group' checked>  <!-- name: for grouping radio buttons, so that one of them can be checked -->
       <label for='tab1'>Contact</label>  <!-- When this label is clicked, the input of id 'tab1' is checked. -->
       <div class='content'>
           ... Content ...
       </div> 
   </div>
   <div class='tab'>
       <input type='radio' id='tab2' name='tab-group'>
       <label for='tab2'>Education</label>
       <div class='content'>
           ... Education ...
       </div> 
   </div>
</div>

Try the above code with runcode. Ask the instructor the username and the password to access the application.

Here is a simple solution.

<style>
    div.tabs { position: relative; }
    div.tabs > div.tab { display:inline; }
    div.tabs > div.tab > input { display:none; }
    div.tabs > div.tab > div.content { 
        display:none;
        position: absolute;
        top: 100%;
        left: 0; 
        width: 100%;
        height: 500px;
        border: 1px solid black;
    }
    div.tabs > div.tab > label:hover { background: LightBlue; }
    div.tabs > div.tab > input:checked ~ label { background: Aquamarine; }
    div.tabs > div.tab > input:checked ~ div.content { display: block; }
</style>

Trial 5: Let's make tabs using radio buttons.
<style> ??? </style> <div class='tr5-tabs'> <div> <input type='radio' id='tr5-tab1' name='tr5-tab-group' checked> <label for='tr5-tab1'>Contact</label> <div> ... Content ... </div> </div> <div> <input type='radio' id='tr5-tab2' name='tr5-tab-group'> <label for='tr5-tab2'>Education</label> <div> ... Education ... </div> </div> </div>

Lab 6

Read Simple CV - VI
Let's complete w6_cv.html using Notepad++, and execute the web appllication by double-clicking it.
tiger.jpg
Here is the solution for your study.

Learning outcomes